<template>
	<view class="index-container">
		<!-- 顶部状态卡片 -->
		<view class="status-card">
			<view class="month-balance">
				<text class="label">当月结余</text>
				<text class="amount">¥{{ formatNumber(monthBalance) }}</text>
			</view>
			<view class="stats-badges">
				<view class="badge">
					<text class="label">支出</text>
					<text class="value">¥{{ formatNumber(monthExpense) }}</text>
				</view>
				<view class="badge">
					<text class="label">收入</text>
					<text class="value">¥{{ formatNumber(monthIncome) }}</text>
				</view>
			</view>
			<!-- 预算进度环 -->
			<view class="budget-progress">
				<view class="progress-ring">
					<text class="progress-text">{{ budgetProgress }}%</text>
				</view>
				<text class="label">预算剩余</text>
			</view>
		</view>
		<!-- 广告位申请 -->
		<view style="background: #fff;border-radius: 30upx;padding: 36upx;font-size: 12upx;">广告位招租：50 / 周、300 / 月</view>
		<!-- 智能图表区 -->
		<view class="chart-section">
			<view class="chart-header">
				<text class="title">消费分析</text>
				<view class="chart-tabs">
					<text :class="['tab', activeChart === 'pie' ? 'active' : '']" @tap="switchChart('pie')">分类占比</text>
					<text :class="['tab', activeChart === 'line' ? 'active' : '']" @tap="switchChart('line')">周支出</text>
				</view>
			</view>
			<view class="chart-container">
				<!-- 图表区域 -->
			</view>
		</view>

		<!-- 快捷入口 -->
		<view class="quick-actions">
			<view class="section-title">快捷操作</view>
			<!-- 固定账单提醒 -->
			<view class="reminder-list">
				<view class="reminder-item" v-for="(item, index) in fixedBills" :key="index">
					<text class="name">{{ item.name }}</text>
					<text class="date">{{ item.date }}</text>
				</view>
			</view>
			<!-- 快速记账按钮 -->
			<view class="quick-record">
				<view class="quick-btn" v-for="(item, index) in quickCategories" :key="index" @tap="quickRecord(item)">
					<text class="icon">{{ item.icon }}</text>
					<text class="name">{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 数据
	const monthBalance = ref(2800.50);
	const monthExpense = ref(3200.50);
	const monthIncome = ref(6000.00);
	const budgetProgress = ref(65);
	const activeChart = ref('pie');

	// 固定账单
	const fixedBills = ref([{
			name: '房租',
			date: '每月20日',
			amount: 2000
		},
		{
			name: '信用卡',
			date: '每月25日',
			amount: 1500
		}
	]);

	// 快速记账分类
	const quickCategories = ref([{
			name: '餐饮',
			icon: '🍚'
		},
		{
			name: '交通',
			icon: '🚌'
		},
		{
			name: '购物',
			icon: '🛍️'
		},
		{
			name: '娱乐',
			icon: '🎮'
		}
	]);

	// 方法
	const formatNumber = (num) => {
		return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	};

	const switchChart = (type) => {
		activeChart.value = type;
	};

	const quickRecord = (category) => {
		// 快速记账逻辑
		uni.navigateTo({
			url: '/pages/record/record?category=' + category.name
		});
	};

	onMounted(() => {
		// 初始化图表等
	});
</script>

<style lang="scss" scoped>
	.index-container {
		padding: 20px;
		background: linear-gradient(135deg, #e8f0ff 0%, #f0f7ff 50%, #f5faff 100%);
		min-height: 100vh;
		padding-top: 100upx;
		padding-top: 100upx;
	}

	.status-card {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

		.month-balance {
			margin-bottom: 20px;

			.label {
				font-size: 14px;
				color: #666;
			}

			.amount {
				display: block;
				font-size: 32px;
				font-weight: bold;
				color: #333;
				margin-top: 4px;
			}
		}

		.stats-badges {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;

			.badge {
				background-color: #f5f5f5;
				padding: 10px 20px;
				border-radius: 12px;
				flex: 1;
				margin: 0 5px;

				.label {
					font-size: 12px;
					color: #999;
				}

				.value {
					display: block;
					font-size: 16px;
					color: #333;
					margin-top: 4px;
				}
			}
		}
	}

	.chart-section {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 20px;

		.chart-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;

			.title {
				font-size: 16px;
				font-weight: bold;
			}

			.chart-tabs {
				.tab {
					padding: 6px 12px;
					font-size: 14px;
					color: #666;
					margin-left: 10px;

					&.active {
						color: #007aff;
						background-color: #e6f2ff;
						border-radius: 20px;
					}
				}
			}
		}
	}

	.quick-actions {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px;

		.section-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		.reminder-list {
			margin-bottom: 20px;

			.reminder-item {
				display: flex;
				justify-content: space-between;
				padding: 12px 0;
				border-bottom: 1px solid #f5f5f5;

				.name {
					color: #333;
				}

				.date {
					color: #999;
					font-size: 14px;
				}
			}
		}

		.quick-record {
			display: flex;
			justify-content: space-between;

			.quick-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10px;

				.icon {
					font-size: 24px;
					margin-bottom: 4px;
				}

				.name {
					font-size: 12px;
					color: #666;
				}
			}
		}
	}
</style>